<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <ui:composition template="/view/retail/template.xhtml">
        <ui:define name="title">
        </ui:define>
        <ui:define name="content">
            <f:view>
                <h:form>
                    <h1 class="ui-widget-header ui-corner-all"><h:outputText value="联系人列表"/></h1>
                    <p:dataTable id ="datatable" var="contact" value="#{contactManager.contactList}" paginator="true" rows="20"
                                 dynamic="true" lazy="true">
                        <p:column  filterBy="#{contact.surname}" filterStyle="width:25px;">
                            <f:facet name="header">
                                <h:outputText value="姓氏"/>
                            </f:facet>
                            <h:outputText value="#{contact.surname}" ></h:outputText>

                        </p:column>
                        <p:column filterBy="#{contact.saluation}" filterStyle="width:25px;"  >
                            <f:facet name="header">
                                <h:outputText value="称谓"/>
                            </f:facet>
                            <h:outputText value="#{contact.saluation}"/>
                        </p:column>
                        <p:column filterBy="#{contact.name}" filterStyle="width:25px;">
                            <f:facet name="header">
                                <h:outputText value="名字"/>
                            </f:facet>
                            <h:outputText value="#{contact.name}"/>
                        </p:column>
                        <p:column resizable=" true" filterBy="#{contact.company}">
                            <f:facet name="header">
                                <h:outputText value="公司"/>
                            </f:facet>
                            <h:outputText value="#{contact.company}"/>
                        </p:column>
                        <p:column sortBy="#{contact.birthday}" filterBy="#{contact.birthday}">
                            <f:facet name="header" >
                                <h:outputText value="生日"/>
                            </f:facet>
                            <h:outputText value="#{contact.birthday}">
                                <f:convertDateTime pattern="MM/dd/yyyy" />
                            </h:outputText>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="结婚日期"/>
                            </f:facet>
                            <h:outputText value="#{contact.marriageDate}">
                                <f:convertDateTime pattern="MM/dd/yyyy" />
                            </h:outputText>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="类型"/>
                            </f:facet>
                            <h:outputText value="#{contact.type}"/>
                        </p:column>
                        <p:column width="100" >
                            <h:panelGrid columns="2" cellpadding="0" cellspacing="10" style="text-align: center;">
                                <h:commandLink action="#{contactManager.showDetails(contact)}" value="详细"  />
                                <h:commandLink action="#{contactManager.edit(contact)}" value="编辑" />
                            </h:panelGrid>
                        </p:column>
                    </p:dataTable>
                </h:form>
            </f:view>

        </ui:define>
    </ui:composition>
</html>
